<template>
	<view class="find">
		<view class="head">
			<div class="all" @click="getAll">
				<div :class="{ active: isActive }">全部</div>
			</div>
			<div class="focus" @click="focus">
				<div :class="{ active: !isActive }">关注</div>
			</div>
			<div class="box"></div>
			<div class="drawer">
				<view>
					<div @click="KeywordDrawer()">
						<div class="iconfont icon-shaixuan"></div>
					</div>
				</view>
			</div>
		</view>
		<view class="body">
			<div class="box"></div>
			<div class="content">
				<scroll-view lower-threshold="50" scroll-y="true" @scrolltolower="solutionlower" class="solutioncontent">
					<showItem v-for="item in solutionList"  :solution="item" @setFavorite="setFavorite"></showItem>
				</scroll-view>
				<div class="noData" v-if="solutionTotal===solutionList.length">没有数据了</div>
			</div>
		</view>
		<!-- 弹层 -->
		<uni-drawer ref="drawer" mode="right" :mask-click="false" class="drawer-box">
			<div class="searchBox">
				<view class="keyword">关键词:</view>
				<scroll-view lower-threshold="50" class="scroll-view" scroll-y="true" type="custom" @scrolltolower="keywordlower">
					<view class="grid">
						<view
							v-for="item in keyWordList"
							:key="item.id"
							class="grid-item"
							:class="{ active: keyWordListId.indexOf(item.id) != -1 }"
							@click="setKeyWordListId(item.id)"
						>
							{{ item.categoryName }}
						</view>
					</view>
				</scroll-view>
			</div>

			<view class="searchButton">
				<div @click="reset" class="reset">重置</div>
				<div @click="confirm" class="confirm">确定</div>
			</view>
		</uni-drawer>
	</view>
</template>
<script>
import { getHomeSolutionList, getFocusSolutionList } from '@/api/solutions/solutions.js';
import { getKeyWordList } from '../../api/keyword/keyword';
export default {
	data() {
		return {
			isActive: true,
			keyWordList: [],
			keyWordListId: [],
			solutionList: [],
			solutionTotal: 0,
			keywordTotal: 0,
			solutionpageNum: 1,
			keywordpageNum: 1,
			solutiontimer: null,
			Keywordtimer: null
		};
	},
	created() {
		this.getSolutionList();
	},
	methods: {
		async getSolutionList() {
			let res = null;
			if (this.isActive) {
				// 全部
				res = await getHomeSolutionList({
					pageNum: this.solutionpageNum,
					pageSize: 10,
					isHome: false,
					categories: this.keyWordListId
				});
			} else {
				// 关注
				res = await getFocusSolutionList();
			}
			const { rows, total } = res;
			
			this.solutionList = this.solutionList.concat(rows);
			this.solutionTotal = total;
			
		},
		async getKeyWordList() {
			const { total, rows } = await getKeyWordList({
				pageNum: this.keywordpageNum,
				pageSize: 70
			});
			this.keyWordList = this.keyWordList.concat(rows);
			this.keywordTotal = total;
		},
		solutionlower() {
			// 方案下拉加载
			this.solutiontimer = this.debounce(this.getSolutionList.bind(this), this.solutionList, this.solutionTotal, 'solutiontimer', 'solutionpageNum');
		},
		keywordlower() {
			// 关键词下拉加载
			console.log('方案下拉');
			// 方案下拉加载
			this.solutiontimer = this.debounce(this.getKeyWordList.bind(this), this.keyWordList, this.keywordTotal, 'Keywordtimer', 'keywordpageNum');
		},
		debounce(func, arr, total, timer, pageNum) {
			if (this[timer] || total <= arr.length) return;
			return setTimeout(() => {
				clearTimeout(timer);
				this[pageNum] += 1;
				func();
				this[timer] = null;
			}, 500);
			// 返回更新后的定时器ID
		},
		getAll() {
			this.solutionpageNum = 1;
			this.isActive = true;
			this.solutionList = [];
			this.getSolutionList();
		},
		focus() {
			this.solutionpageNum = 1;
			this.isActive = false;
			this.solutionList = [];
			this.getSolutionList();
		},
		KeywordDrawer() {
			// 检查KeywordList有么有数据
			if (this.keyWordList.length <= 0 || this.keyWordList == null) {
				this.getKeyWordList();
			}
			this.$refs.drawer.open();
		},
		confirm(e) {
			this.isActive = true;
			this.solutionList = [];
			this.solutionpageNum = 1;
			this.getSolutionList();
			this.$refs.drawer.close();
		},
		reset(e) {
			this.keyWordListId = [];
			this.$refs.drawer.close();
			this.isActive = true;
			this.solutionList = [];
			this.solutionpageNum = 1;
			this.getSolutionList();
		},
		setKeyWordListId(keywordId) {
			console.log(keywordId);
			console.log(index > -1);
			const index = this.keyWordListId.indexOf(keywordId);
			if (index > -1) {
				this.keyWordListId.splice(index, 1);
			} else {
				this.keyWordListId.push(keywordId);
			}
		},
		setFavorite(favorite, solutionid) {
			this.solutionList.forEach((item) => {
				if (item.id === solutionid) {
					item.favorite = favorite;
				}
			});
		}
	}
};
</script>
<style lang="less" scoped>
.find {
	.head {
		z-index: 999;
		position: fixed;
		height: 70rpx;
		width: 100%;
		background-color: #d3d3d3;
		padding: 0 10px;
		display: flex;
		.all,
		.focus {
			height: 70rpx;
			width: 180rpx;
			line-height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.active {
			border-bottom: 2px solid black;
			text-align: center;
			width: 100rpx;
			font-size: 35rpx;
			font-weight: 700;
		}
		.box {
			flex: 1;
		}
		.drawer {
			width: 100rpx;
			background-color: green;
			.iconfont {
				width: 100%;
				line-height: 70rpx;
				font-size: 50rpx;
				text-align: center;
			}
		}
	}
	.body {
		.box {
			height: 70rpx;
			width: 100%;
		}
		.content {
			height: calc(100vh - 70rpx);
			.solutioncontent {
				height: 100%;
			}
			.noData{
				margin: 20rpx;
				text-align: center;
				font-size: 40rpx;
				color: #0A4D68;
			}
		}
	}
	.drawer-box {
		margin-top: 20%;
		height: 80%;
		/deep/ .uni-drawer__content {
			width: 75% !important;
		}
		.searchBox {
			width: 100%;
			height: 90%;
			padding: 10rpx 10px;
			// background-color: red;
			.keyword {
				padding: 30rpx 0 0 40rpx;
				width: 100%;
				height: 10%;
				font-size: 40rpx;
				font-weight: 700;
				// background-color: gray;
			}
			.scroll-view {
				width: 100%;
				height: 90%;
				// background-color: green;
				.grid {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					gap: 20rpx;
					.grid-item {
						height: 50rpx;
						padding: 0 4rpx;
						border-radius: 10rpx;
						line-height: 50rpx;
						text-align: center;
						border: 1px solid #d3d3d3;
						white-space: nowrap; /* 禁止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 使用"..."表示被隐藏的文本 */
					}
					.active {
						border: 1px solid #ff6347;
					}
				}
			}
		}
		.searchButton {
			display: flex;
			justify-content: space-around;
			background-color: gainsboro;
			height: 10%;
			align-items: center;
			.reset {
				width: 140rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #efefef;
				border-radius: 20rpx;
			}
			.confirm {
				border: 1px solid black;
				width: 180rpx;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
				color: #fff;
				font-size: 35rpx;
				background-color: #115f92;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
